<template>
  <div class="studentList__button">
    <el-button type="primary" class="issueAdd" @click="leaveAdd"><el-icon><DocumentAdd /></el-icon>请假</el-button>
  </div>
  <div class="tab_from">
    <el-table stripe
              :data="tableData"
              style="width: 100%" border
              :cell-style="{ textAlign: 'center' }"
              :header-cell-style="{ 'text-align': 'center' }"
              size="small"
              v-loading="loading"
              element-loading-text="Loading..."
              :element-loading-spinner="svg"
              element-loading-svg-view-box="-10, -10, 50, 50"
    >

      <el-table-column label="序号" width="50">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column label="请假学生" width="100">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.student.name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="年级班级" width="100">
        <template #default="scope">
          <span style="margin-left: 10px">{{ numberToChinese(scope.row.student.classes.classId) }} 年级 ({{ scope.row.student.classes.classId }})班</span>
        </template>
      </el-table-column>

      <el-table-column label="请假类型" width="100">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.type }}</span>
        </template>
      </el-table-column>

      <el-table-column label="请假时间" width="180">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.beginTime }}</span>
          <span>至</span>
          <span style="margin-left: 10px">{{ scope.row.endTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="请假事由" width="100">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.detail }}</span>
        </template>
      </el-table-column>

      <el-table-column label="发起人" width="80">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.teacher.name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="发起时间" width="160">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.beginTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="请假状态" width="180">
        <template #default="scope">
          <span style="margin-left: 10px" v-show="scope.row.state === '2'">
             <el-text class="mx-1" type="success">已通过</el-text>
          </span>
          <span style="margin-left: 10px" v-show="scope.row.state === '1'">
            <el-text class="mx-1" type="warning">待审核</el-text>
          </span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template #default="scope">
          <!--            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>-->
          <div v-show="scope.row.state === '2'">
            <el-text class="mx-1" type="primary" @click="handleCheck(scope.$index)">查看</el-text>
          </div>
          <div v-show="scope.row.state === '1'">
            <el-text class="mx-1" type="primary" @click="handleCheck(scope.$index)">查看</el-text>
            <el-text class="mx-1 reject" type="primary" @click="turnDown(scope.row.id,scope.$index)">撤销</el-text>
          </div>
        </template>
      </el-table-column>

    </el-table>
  </div>

  <!--  分页  -->
  <paging v-if="pagState" @pag="handlePag" @pag-add="handlePagAdd" @pag-reduce="handlePagReduce" @pag-skip="handleSkip" :msg="pageList"/>


  <!-- 增加弹出层 -->
  <el-dialog v-model="dialogFormVisible" title="请假申请" draggable>
    <el-form :model="addform"  :rules="rules">
      <el-form-item label="发起人 :" :label-width="formLabelWidth">
        <el-text class="mx-1">杨老师</el-text>
      </el-form-item>

      <el-form-item label="请假学生 :" :label-width="formLabelWidth" prop="sName">
        <el-input v-model="addform.sName" autocomplete="off" />
      </el-form-item>

      <el-form-item label="请假类型 :" :label-width="formLabelWidth" prop="type">
        <el-select v-model="addform.type" placeholder="请选择">
          <el-option label="事假" value="事假" />
          <el-option label="病假" value="病假" />
        </el-select>
      </el-form-item>

      <el-form-item label="起止时间 :" :label-width="formLabelWidth" prop="Time">
        <el-date-picker
            v-model="addform.Time"
            type="datetimerange"
            start-placeholder="Start Date"
            end-placeholder="End Date"
            :default-time="defaultTime1"
        />
      </el-form-item>

      <el-form-item label="请假事由 :" :label-width="formLabelWidth" prop="detail">
        <el-input
            v-model="addform.detail"
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
            placeholder="请输入"
        />
      </el-form-item>

      <el-form-item class="btn">
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="leaveAddSubmit">
            提交
          </el-button>
        </span>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!-- 抽屉弹出层 -->
  <el-drawer v-model="visible" :show-close="false">
    <template #header="{ close, titleId, titleClass }">
      <h4 :id="titleId" :class="titleClass">
        查看请假申请</h4>
      <el-button type="danger" @click="close">
        <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
      </el-button>
    </template>
    <div class="leaveDetails">
      <p>{{checkList.student.name}} / {{grade}}年级（{{checkList.student.classes.classId}}）班</p>
      <p>{{checkList.teacher.name}}:{{checkList.initTime}}</p>
      <p>请假类型：{{checkList.type}}</p>
      <p>请假时间：{{checkList.beginTime}} 至 {{checkList.endTime}}</p>
      <p>请假事由：{{checkList.detail}}</p>
    </div>
    <div>
      <el-timeline>
        <el-timeline-item :color="checkList.state === '2'?'#0bbd87':''" :hollow="primary" center  placement="top">
          <div class="leaveState">
            <p>教师：{{checkList.teacher.name}}</p>
            <el-text class="mx-1" type="primary" v-if="checkList.state==='2'">已通过</el-text>
            <el-text class="mx-1" type="danger" v-else>待确认</el-text>
          </div>
        </el-timeline-item>

        <el-timeline-item :color="checkList.state === '2'?'#0bbd87':''" placement="top">
          <div class="leaveState">
            <p>家长：{{checkList.student.name}}</p>
            <el-text class="mx-1" type="primary" v-if="checkList.state==='2'">已通过</el-text>
            <el-text class="mx-1" type="danger" v-else>待确认</el-text>
          </div>
        </el-timeline-item>

      </el-timeline>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import {defineAsyncComponent, reactive, ref} from "vue";
import service from "@/api";
import {ElMessage} from "element-plus";

const paging = defineAsyncComponent(() => import('@/components/paging.vue'))
const dialogFormVisible = ref(false)
const visible = ref(false)
const formLabelWidth = '140px'

const loading = ref(true)
// 类型相关数据
const genreData = ref([])
const genreMsg = [
  {
    value: 'inform1',
    label: '通知',
  },
  {
    value: 'inform2',
    label: '公告',
  },
  {
    value: 'inform3',
    label: '活动',
  },
  {
    value: 'inform4',
    label: '缴费通知',
  },
  {
    value: 'inform5',
    label: '选课通知',
  },
  {
    value: 'inform6',
    label: '缴费通知',
  },
]
// 获取通知列表
let tableData = reactive([])

const handleDelete = (index: number, row: []) => {
  console.log(index, row)
}


let inFormList = ref([]) // 表格数据获取
let pages = ref(1) // 当前页
let total = ref(5) // 条数
let pagState = ref(false) // 当获取到数据展示分页
let pageList = '' // 分页数据，需要传递给分页子组件

// 发请求
const getRes = async (pagDate: { cp: number; ps: number; })=> {
  const res = await service.jiaxiaohutong.jxGetLeaveRecordList(pagDate)
  inFormList.value = res.data.data.data // 表格数据
  pageList = res.data.data.page // 分页数据
  pagState.value = true // 当有数据展示分页条
  for (let i = 0; i < inFormList.value.length; i++) {
    tableData.push(inFormList.value[i])
  }
  console.log(tableData)
  loading.value = false // 加载动画 关闭
}
getRes({cp: pages.value,ps: total.value})

// 分页条数更改数据
function listMain(upDate:{pages: number,total: number}) {
  loading.value = true // 每次调用这个方法开启加载动画
  tableData.length=0 // 清空分页
  getRes({cp: upDate.pages-1,ps: upDate.total})
}

// 条数变更 --- 处理 分页组件 handlePag 事件
function handlePag(value: {pages: number,total: number}) {
  listMain(value)
}
// 增加
function handlePagAdd(value: {pages: number,total: number}) {
  listMain(value)
}

// 减少
function handlePagReduce(value: {pages: number,total: number}) {
  listMain(value)
}

// 跳转
function handleSkip(value: {pages: number,total: number}) {
  listMain(value)
}

// 驳回
async function turnDown(id:number,index: number) {
  console.log(id)
  const res = await service.jiaxiaohutong.jxDelLeave(id)
  console.log(res.data.message)
  ElMessage({
    showClose: true,
    message: res.data.message,
    type: 'success',
  })
}

// 新增
const addform = reactive({
  sId : '2300030', // 学生id
  sName: '',
  type : '', // 请假类型
  beginTime : '',
  endTime : '',
  detail : '', // 请假事由
  tId : '1001', // 老师id
  state: '1', // 状态码(1:提交申请 2:老师已同意 3:家长已确认)
  Time: ''
})

function leaveAdd() {
  dialogFormVisible.value = true
}
function leaveAddSubmit() {
  console.log(addform)
  addform.beginTime = timeConversion(addform.Time[0])
  addform.endTime = timeConversion(addform.Time[1])

  const res = service.jiaxiaohutong.jxAddLeave(addform)
  console.log(res)
  dialogFormVisible.value = false
}

// 时间转换
function timeConversion(time: string) {
  const timeE = new Date(time)
  const year = timeE.getFullYear();
  const month = timeE.getMonth() + 1; // 返回值范围是0~11，需要加1才是实际月份
  const day = timeE.getDate();
  const hour = timeE.getHours();
  const minute = timeE.getMinutes();
  const second = timeE.getSeconds();

  const ti = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
  return ti
}


// 查看
const checkList = ref('')
let grade = ref('')
function handleCheck(index: number) {
  checkList.value = tableData[index]
  grade.value = numberToChinese(checkList.value.student.classes.gradeId)
  visible.value = true
}
function numberToChinese(number: string) {
  const cnNums = ["一","二","三","四","五","六","七","八","九","十","十一","十二"]
  const index = parseInt(number, 10) - 1

  if (index < 0 || index > 11) {
    // 处理超出范围的数字
    return ""
  }
  return cnNums[index]
}
</script>

<style scoped>
.tab_from .reject{
  margin: 0 10px;
}
:deep(.el-text--primary){
  cursor:pointer;
}
.studentList__button{
  display: flex;
  justify-content: right;
  margin-bottom: 10px;
}
.btn :deep(.el-form-item__content){
  justify-content: center;
}
.leaveState{
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.leaveDetails p{
  margin: 10px 0;
}
.leaveDetails p:nth-child(2){
  font-size: 12px;
  color: #dedede;
}

</style>
